import React, { useEffect } from "react";
import { useNavigate, useLocation } from "react-router";
// 定义高阶组件处理路由守卫，
// 提取组件核心逻辑，让代码可以复用，
// 高阶组件就是一个函数，用来包装组件，让包装以后的组件更强大
// 高阶组件接受的参数是一个组件
// 函数返回的也是一个组件
function WithRouter(Cpn: any) {
  function NewCpn() {
    const navigate = useNavigate();
    const { pathname } = useLocation();
    const userInfor = JSON.parse(localStorage.getItem("userInfor") || "{}");
    useEffect(() => {
      if (!userInfor && pathname !== "/login") {
        navigate("/login");
      }
    }, [pathname]);
    return <Cpn />;
  }
  return NewCpn;
}
export default WithRouter;
